<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--支付页-失败</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-payfail.css"/>
</head>

<body>

<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="top"></div>
<script type="text/javascript">$(".top").load("shortcut.html");</script>

<div class="cart py-container">
    <!--logoArea-->
    <div class="logoArea">
        <div class="fl logo"><span class="title">支付页</span></div>
    </div>
    <!--主内容-->
    <div class="payfail" id="payfail">
        <div class="fail">
            <h3><img src="img/_/fail.png" width="48" height="48">　支付失败，请稍后再试</h3>
            <div class="fail-text">
                <p>失败原因：支付已经超时，请重新尝试付款！</p>
                <p>您可以先去　<a href="index.html" target="_blank">乐优首页</a>　逛逛</p>
                <p class="button"><a href="javascript:void (0)" onclick="rePay()" class="sui-btn btn-xlarge btn-danger">重新支付</a>
                </p>
            </div>
        </div>

    </div>
</div>
<script>
    function rePay() {
        //1.获取浏览器的URL的所有参数
        //使用search属性获取所有参数，并去掉最后一个？号
        let paramsStr = window.location.search.substring(1);
        let orderId = paramsStr.slice(8);

        location.href = "http://www.leyou.com/pay.html?orderId=" + orderId;


    }
</script>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.min.js"></script>
<script>
    var payVm = new Vue({
        el: "#payfail",
        data() {
            return {
                ly,
                order: {}
            }
        },
        created() {

            ly.http.get("/auth/verify").then(() => {
                // 获取订单id
                const id = ly.getUrlParam("id");
                // 查询付款金额
                ly.http.get("/order/" + id).then(resp => {
                    this.order = resp.data;
                    this.order.orderId = id;
                    // 判断订单状态
                    if (this.order.status == 2) {
                        alert("订单已支付！");
                        location.href = "/paysuccess.html?orderId=" + id;
                    } else if (this.order.status == 5) {
                        location.href = "/payfail.html?orderId=" + id;
                    }
                    // 生成付款链接
                    ly.http.get("/order/url/" + id).then(resp => {
                        new QRCode(document.getElementById("qrImage"), {
                            text: resp.data,
                            width: 250,
                            height: 250,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });
                        // 开启定时任务，查询付款状态
                        const taskId = setInterval(() => {
                            ly.http.get("/order/state/" + id)
                                .then(resp => {
                                    let i = resp.data;
                                    if (i == 2) {
                                        // 付款成功
                                        clearInterval(taskId);
                                        // 跳转到付款成功页
                                        location.href = "/paysuccess.html?orderId=" + id;
                                    } else if (i == 5) {
                                        location.href = "/payfail.html?orderId=" + id;
                                    }
                                }).catch((e) => {
                                alert("支付状态查询失败，请刷新页面重试。");
                                clearInterval(taskId);
                            })
                        }, 3000);
                        // 同时设置一个定时任务，10分钟后，终止查询，认为付款失败
                        setTimeout(() => {
                            clearInterval(taskId);
                            location.href = "/payfail.html?orderId=" + id;
                        }, 600000)
                    }).catch(e => {
                        alert("库存不足！")
                    });
                })

            }).catch(() => {
                window.location.href = "/login.html?returnUrl=" + window.location.href;
            })
        },
        components: {
            shortcut: () => import("./js/pages/shortcut.js")
        }
    });
</script>


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="components/ui-modules/nav/nav-portal-top.js"></script>
</body>

</html>